<template>
  <div class="m-chat">
    <div class="m-title">
      科技企业包括国家高新技术企业，江苏省科技型中小企业，江苏省民营科技企业，属于雏鹰计划企业，以及拥有四
      级领军人才的企业等，共5582家。
    </div>
    <div>
      <el-row :gutter="20" type="flex"  justify="center" class="m-margin">
        <el-col :span="11"> <el-card shadow="always"> <div class="m-height" id="Chart1" ></div></el-card></el-col>
        <el-col :span="11">  <el-card ><div class="m-height" id="Chart2"></div></el-card></el-col>
      </el-row>
      <el-row type="flex"  justify="center" >
        <el-col :span="22"> <el-card ><div class="m-height" id="Chart3"></div></el-card></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  // 引入 ECharts 主模块
  let echarts = require('echarts/lib/echarts');
  // 引入柱状图
  require('echarts/lib/chart/bar');
  // 引入提示框和标题组件
  require('echarts/lib/component/tooltip');
  require('echarts/lib/component/title');

    export default {
        name: "TechnologyEnterprise",
      mounted(){
        this.initChart();
      },
      methods:{
        initChart(){
          // 基于准备好的dom，初始化echarts实例
          let myChart1 = echarts.init(document.getElementById('Chart1'))
          let myChart2 = echarts.init(document.getElementById('Chart2'))
          let myChart3 = echarts.init(document.getElementById('Chart3'))
          // 绘制图表
          myChart1.setOption({
            title: { text: '企业资质分布' ,
              left: 'center'},
            tooltip: {},
            xAxis: {
              data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
              name: '销量',
              type: 'bar',
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      {offset: 0, color: '#83bff6'},
                      {offset: 0.5, color: '#188df0'},
                      {offset: 1, color: '#188df0'}
                    ]
                  )
                }
                },
              data: [5, 20, 36, 10, 10, 20],
              label: {
                normal: {
                  show: true,
                  position: 'top'
                }
              },

            }]
          });
          myChart2.setOption({
            title: { text: '领军企业分布' ,
              left: 'center'},
            tooltip: {},
            xAxis: {
              data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
              name: '销量',
              type: 'bar',
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      {offset: 0, color: '#83bff6'},
                      {offset: 0.5, color: '#188df0'},
                      {offset: 1, color: '#188df0'}
                    ]
                  )
                }
              },
              data: [5, 20, 36, 10, 10, 20],
              label: {
                normal: {
                  show: true,
                  position: 'top'
                }
              },
            }]
          });
          myChart3.setOption({
            title: { text: '产业领域分布' , left: 'center'},
            tooltip: {},
            xAxis: {
              data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
              name: '销量',
              type: 'bar',
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      {offset: 0, color: '#83bff6'},
                      {offset: 0.5, color: '#188df0'},
                      {offset: 1, color: '#188df0'}
                    ]
                  )
                }
              },
              data: [5, 20, 36, 10, 10, 20],
              label: {
                normal: {
                  show: true,
                  position: 'top'
                }
              },
            }]
          });
        },
        handleClick(){

        }
      }
    }
</script>

<style scoped lang="less">

  .m-height{
    height: 300px;
  }
  .m-title{
    margin-bottom: 30px;

  }
  .m-margin{
    margin-bottom: 25px;
  }

</style>
